<template>
  <view class="page" style="padding: 40rpx 80rpx;">
		<u-navbar :background="{background: 'rbga(0,0,0,0)'}" :borderBottom="false"></u-navbar>
		<view class="text-center" style="margin:70rpx 0">
			<image src="../static/login/login.png" style="width:414rpx;height:108rpx"></image>
		</view>
		<u-form class="u-m-t-50" :model="form" ref="uForm" label-position="left" :labelStyle="{fontSize: '28rpx', fontWeight: 'bold',color: '#333'}">
			<u-form-item prop="mobile" left-icon="../static/login/phone.png" :left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
				<u-input v-model="form.mobile" type="number" placeholder="请输入手机号码" />
			</u-form-item>
			<u-form-item prop="captcha" left-icon="../static/login/password.png" :left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
				<view class="flex flex-1">
					<u-input class="flex-1" v-model="form.captcha" type="number" placeholder="请输入短信验证码" />
					<dy-phone-code-button :mobile="form.mobile"></dy-phone-code-button>
				</view>
			</u-form-item>
			<u-form-item prop="password" left-icon="../static/login/password.png" :left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
				<u-input :clearable="false" placeholder="请输入登录密码" v-model="form.password" type="password" />
			</u-form-item>
			<u-form-item prop="paypwd" left-icon="../static/login/password.png" :left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
				<u-input :clearable="false" placeholder="请输入支付密码" v-model="form.paypwd" type="password" />
			</u-form-item>
			<u-form-item prop="tjid" left-icon="../static/login/password.png" :left-icon-style="{ width:'36rpx', height:'36rpx', 'margin': '0 20rpx', 'display': 'flex' }">
				<u-input :clearable="false" placeholder="请输入推荐码（可选）" v-model="form.tjid" />
			</u-form-item>
		</u-form>
		<view class="flex flex-column align-center justify-center u-m-t-50">
			<dy-button size="default" color="#fff" width="576rpx" fontSize="30rpx" fontWeight="700" @click="subBt" background="linear-gradient(87deg, #F28E26, #FD644F)">立即注册</dy-button>
			<view class="u-m-t-30">
				<u-checkbox shape="circle" v-model="checked">
					<text>登录即代表您已经阅读同意</text>
					<text class="text-primary" @click.stop="toArgu('register_credit')">《用户服务协议》</text>
				</u-checkbox>
				<view class="text-center">
					<text class="text-primary" @click.stop="toArgu('privacy_agreement')">《隐私政策》</text>
				</view>
			</view>
		</view>
  	</view>
</template>

<script>
  import { BaseCenterApi } from "@/api/serves.js"
  import { mapMutations } from 'vuex'
  export default {
    data() {
      return {
				checked: false,
        form: {
          mobile: '',
          captcha: '',
          password: '',
          paypwd: '',
          tjid: '',
        },
        loading: false,
        rules: {
          mobile: [
          	{required: true,message: '请输入手机号码',	trigger: ['blur'],},
          	{
          	  validator: (rule, value, callback) => {
          	    if (this.$u.test.mobile(value)) {
          	      callback();
          	    } else {
          	      callback(new Error("请输入正确的手机号码"));
          	    }
          	  },
          	},
          ],
          captcha: [{
            required: true,
            message: '请输入验证码',
            trigger: 'change',
            trigger: ['blur'],
          }],
					password: [{
						validator: (rule, value, callback) => {
							if (this.$u.test.enOrNum(value)&&this.$u.test.rangeLength(value,[6,15])) {
							callback();
							} else {
							callback(new Error("请输入6-15位的数字和字母"));
							}
						}
						}],
					paypwd: [{
						validator: (rule, value, callback) => {
							if (this.$u.test.digits(value)&&this.$u.test.rangeLength(value,[6,6])) {
							callback();
							} else {
							callback(new Error("请输入6位数字支付密码"));
							}
						},
						}
			],
        }
      };
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
		onLoad(options) {
			console.log('options', options);
        	let tjid = uni.getStorageSync("tjid")
			if(tjid){
				this.form.tjid = tjid
				uni.removeStorageSync("tjid")
			}
			// this.form.tjid = options.tjname || ''
			// if(this.isLogin && options.tjname) { // 已经登录直接跳转对应的位置
			// 	if(options.id && options.tjname) {
			// 		switch (options.type){
			// 			case 'group':
			// 				uni.redirectTo({
			// 					url: '/pages/group/groupIntevite/groupIntevite?id=' + options.id
			// 				})
			// 				break;
			// 			default:
			// 				break;
			// 		}
			// 	}else {
			// 		uni.switchTab({
			// 			url: '/pages/tabbar/index/index'
			// 		})
			// 	}
				
			// }
		},
    methods: {
			...mapMutations({
			  SET_USER_INFO: 'user/SET_USER_INFO',
			  SET_USER_TOKEN: 'user/SET_USER_TOKEN',
			}),
      subBt() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
						if(!this.checked) return this.$Toast('请同意隐私协议', 1500)
            this.login()
          }
        });
      },
			login() {
			  this.loading = true
				uni.showLoading()
			  BaseCenterApi.register(this.form).then(res => {
			    console.log(res);
					this.$u.toast(res.msg, 1500)
					this.loading = false
					uni.hideLoading()
			    if (res.code == 1) {
			      this.SET_USER_INFO(res.data)
			      this.SET_USER_TOKEN(res.data.token)
			      setTimeout(() => {
			        uni.switchTab({
			          url: "/pages/tabbar/index/index",
			        });
			      }, 1000);
			    }
			  })
			},
      toArgu(type) {
        uni.navigateTo({
          url: '/pages/login/registerArgu/registerArgu?type='+type
        })
      }
    },
  }
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		background-color: #fff;
	}
</style>
